import React, { Suspense } from 'react';
import { HashRouter as Router, Navigate , useRoutes } from 'react-router-dom';
import { connect } from 'react-redux';
import routes from './config';
//路由配置

import MyFooter from '../components/myfooter';
const App = (props) => {
    //路由守卫  函数
    function transRoutes(routes) {
        const list = [];//整理后的路由表
        const isLogin = props.token !== '' ? true : false;
        routes.forEach(route => {
            const obj = { ...route };
            if (obj.redirect) {
                obj.element = <Navigate to="/login" replace={true} />;
            }
            if (!isLogin) {//没登录
                if (obj.auth) {//这个页面是需要路由守卫的状态值
                    obj.element = <Navigate to="/login" replace={true} />
                }
            }
            ['redirect', 'page', 'meta'].forEach(name => delete obj[name]);
            list.push(obj);
        })
        return list;
    }

    const GetRoutes = () => useRoutes(transRoutes(routes));
    return (
        <Router>
            <MyFooter />
            <div className="content">
                <Suspense fallback={<div>Loading...</div>}>
                    <GetRoutes />
                </Suspense>
            </div>
        </Router>
    )
}




export default connect(state => ({ token: state.user.token || '' }))(App);